<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="shortcut icon" href="./favicon.ico">
  <title>前端凡师兄-测试题</title>
  <style>
    dl,dt,dd{margin:0;padding:0;}
    a{color: #000; text-decoration: none;}
    #app{
      
    }
    dl{
      margin:5px;
      padding:5px;
      border:1px solid #ccc;
    }
    dt{
      /* text-align:center; */
      font-weight:bolder;
      font-size: large;
    }
    </style>
</head>
<body>
  <div id="app">
    <h1>测试题</h1>
    <div class="container">
      <dl v-for="item in list">
        <dt>{{item.category}}</dt>
        <dd v-for="it in item.list">
          <a :href="it.fileLink">{{it.name}}</a>
        </dd>
      </dl>
    </div>
    <hr/>
    
  </div>

  <script src="./vue.min.js"></script>
  <script>
    const d={list:[{category:"ajax",list:[{desc:"ajax的知识点练习1",name:"ajax专项练习11",fileLink:"ajax-01.html"},{desc:"ajax的知识点练习2",name:"ajax专项练习2",fileLink:"ajax-02.html"}]},{category:"vue",list:[{desc:"vuex是非常重要的内容，是必须要掌握的部分",name:"vuex的题目",fileLink:"vue-route.html"},{desc:"vuex是非常重要的内容，是必须要掌握的部分",name:"vuex的题目",fileLink:"vue-router1.html"},{desc:"vuex是非常重要的内容，是必须要掌握的部分",name:"vuex的题目",fileLink:"vue-vuex.html"}]}]}
  </script>
  <script>
    new Vue({
      el: '#app',
      data: {
        list: d.list
      }
    })
  </script>
</body>
</html>